<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="formValidate" :model="formValidate" :label-width="80" @submit.native.prevent>
        <Row :gutter="24" type="flex">
          <Col span="24" class="ivu-text-left">
            <FormItem label="核销日期：">
              <RadioGroup
                v-model="formValidate.data"
                type="button"
                class="mr"
                @on-change="selectChange(formValidate.data)"
              >
                <Radio :label="item.val" v-for="(item, i) in fromList.fromTxt" :key="i">{{ item.text }}</Radio>
              </RadioGroup>
              <DatePicker
                :editable="false"
                @on-change="onchangeTime"
                :value="timeVal"
                format="yyyy/MM/dd"
                type="daterange"
                placement="bottom-end"
                placeholder="请选择时间"
                style="width: 200px"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col span="12" class="ivu-text-left">
            <FormItem label="筛选条件：">
              <Input enter-button placeholder="请输入搜索内容" v-model="formValidate.real_name" style="width: 430px">
                <Select v-model="field_key" slot="prepend" style="width: 80px">
                  <Option value="all">全部</Option>
                  <Option value="order_id">订单号</Option>
                  <Option value="uid">UID</Option>
                  <Option value="real_name">用户姓名</Option>
                  <Option value="user_phone">用户电话</Option>
                  <Option value="title">商品名称(模糊)</Option>
                </Select>
              </Input>
            </FormItem>
          </Col>
          <Col span="12" class="mr">
            <FormItem label="选择门店：" label-for="store_name">
              <Select
                v-model="formValidate.store_id"
                element-id="store_id"
                clearable
                @on-change="userSearchs"
                style="width: 430px"
              >
                <Option v-for="item in storeSelectList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12" class="mr">
            <FormItem label="" label-for="store_name">
              <Button type="primary" class="mr15" @click="userSearchs">搜索</Button>
              <Button class="mr15" @click="refresh">刷新</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Table
        :columns="columns"
        :data="orderList"
        ref="table"
        :loading="loading"
        highlight-row
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
        class="orderData mt25"
      >
        <template slot-scope="{ row, index }" slot="name"> {{ row.nickname }}/{{ row.uid }} </template>
        <template slot-scope="{ row, index }" slot="spread_nickname">
          <a href="javascript:void(0);" @click="referenceInfo(row.spread_uid)">{{ row.spread_nickname }}</a>
        </template>
        <template slot-scope="{ row, index }" slot="info">
          <div class="tabBox" v-for="(val, i) in row._info" :key="i">
            <div class="tabBox_img">
              <img
                v-lazy="
                  val.cart_info.productInfo.attrInfo
                    ? val.cart_info.productInfo.attrInfo.image
                    : val.cart_info.productInfo.image
                "
              />
            </div>
            <span class="tabBox_tit"
              >{{ val.cart_info.productInfo.store_name + ' | '
              }}{{ val.cart_info.productInfo.attrInfo ? val.cart_info.productInfo.attrInfo.suk : '' }}</span
            >
            <span class="tabBox_pice">{{ '￥' + val.cart_info.truePrice + ' x ' + val.cart_info.cart_num }}</span>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="status_name">
          {{ row.status_name.status_name }}
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="total"
          :current="formValidate.page"
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="formValidate.limit"
        />
      </div>
    </Card>
    <referrer-info ref="info"></referrer-info>
  </div>
</template>

<script>
import { verifyOrderApi, merchantStoreListApi } from '@/api/setting';
import cardsData from '@/components/cards/cards';
import referrerInfo from '@/components/referrerInfo/index';
export default {
  name: 'setting_order',
  components: { cardsData, referrerInfo },
  data() {
    return {
      formValidate: {
        page: 1,
        limit: 15,
        data: '',
        real_name: '',
        store_id: '',
        field_key: '',
      },
      field_key: '',
      fromList: {
        title: '选择时间',
        custom: true,
        fromTxt: [
          { text: '全部', val: '' },
          { text: '今天', val: 'today' },
          { text: '昨天', val: 'yesterday' },
          { text: '最近7天', val: 'lately7' },
          { text: '最近30天', val: 'lately30' },
          { text: '本月', val: 'month' },
          { text: '本年', val: 'year' },
        ],
      },
      timeVal: [],
      storeSelectList: [],
      columns: [
        {
          title: '订单号',
          key: 'order_id',
          minWidth: 180,
          sortable: true,
        },
        {
          title: '用户信息',
          slot: 'name',
          minWidth: 120,
        },
        {
          title: '推荐人信息',
          slot: 'spread_nickname',
          minWidth: 120,
        },
        {
          title: '商品信息',
          slot: 'info',
          minWidth: 300,
        },
        {
          title: '实际支付',
          key: 'pay_price',
          minWidth: 90,
        },
        {
          title: '核销员',
          key: 'clerk_name',
          minWidth: 90,
        },
        {
          title: '核销门店',
          key: 'store_name',
          minWidth: 120,
        },
        {
          title: '支付状态',
          key: 'pay_type_name',
          minWidth: 80,
        },
        {
          title: '订单状态',
          slot: 'status_name',
          minWidth: 80,
        },
        {
          title: '下单时间',
          key: 'add_time',
          minWidth: 130,
          sortable: true,
        },
      ],
      orderList: [],
      loading: false,
      total: 0,
    };
  },
  mounted() {
    this.getList();
    this.storeList();
  },
  methods: {
    getList() {
      let that = this;
      that.loading = true;
      that.formValidate.field_key = this.field_key === 'all' ? '' : this.field_key;
      verifyOrderApi(that.formValidate)
        .then((res) => {
          that.loading = false;
          that.orderList = res.data.data;
          that.total = res.data.count;
        })
        .catch((res) => {
          that.$Message.error(res.msg);
        });
    },
    userSearchs() {
      this.formValidate.page = 1;
      this.getList();
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.formValidate.data = this.timeVal.join('-');
      this.getList();
    },
    // 选择时间
    selectChange(tab) {
      this.formValidate.page = 1;
      this.formValidate.data = tab;
      this.timeVal = [];
      this.getList();
    },
    storeList() {
      let that = this;
      merchantStoreListApi()
        .then((res) => {
          that.storeSelectList = res.data;
        })
        .catch((res) => {
          that.$Message.error(res.msg);
        });
    },
    pageChange(index) {
      this.formValidate.page = index;
      this.getList();
    },
    referenceInfo(uid) {
      this.$refs.info.isTemplate = true;
      this.$refs.info.verifySpreadInfo(uid);
    },
    refresh() {
      this.formValidate = {
        page: 1,
        limit: 15,
        data: '',
        real_name: '',
        store_id: '',
        field_key: '',
      };
      this.field_key = '';
      this.getList();
    },
  },
};
</script>

<style scoped lang="stylus">
img {
    height: 36px;
    display: block;
}
.tabBox
    width 100%
    height 100%
    display flex
    align-items: center
    .tabBox_img
        width 36px
        height 36px
        img
            width 100%
            height 100%
    .tabBox_tit
        width 60%
        font-size 12px !important
        margin 0 2px 0 10px
        letter-spacing: 1px;
        padding: 5px 0;
        box-sizing: border-box;
.orderData >>>.ivu-table-cell{padding-left: 0 !important;}
.vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;}
.ivu-mt{
  margin-bottom 12px
}
.ivu-mt a
   color #515a6e
.ivu-mt a:hover
    color: #2D8cF0;
.ivu-mt /deep/ .ivu-form-item{
  padding 7px 0;
  margin-bottom 0
}
</style>
